<template>
  <div class="document-wrap">
    <div class="menu-wrap" :class="isCollapse?'':'expand'">
      <!--      <button @click="()=>{this.isCollapse=!this.isCollapse}">expand-->
      <!--      </button>-->
      <div class="space-font">
        <span class="first-title">智联空间</span>
        <el-tag round type="primary" effect="dark" style="font-size: 1rem;margin-left: 1rem">{{directoryType($props.type)}}</el-tag>
        <el-link type="primary" style="margin-left: 1rem;margin-right: 2rem ;font-size: 1.7rem;" @click="returnToSpace">
          <el-icon><Back /></el-icon>
          返回主页
        </el-link>
      </div>
      <div class="preview-complete">
        <el-autocomplete v-model="searchItem"
                         class="preview-autocomplete"
                         :fetch-suggestions="previewQuerySearch"
                         popper-class="preview-autocomplete"
                         @select="handleSearch1"
                         value-key="name"
                         clearable
                         placeholder="搜索文档">
          <template #prefix>
            <el-icon class="el-input__icon">
              <search/>
            </el-icon>
          </template>
          <template #default="{item}">
            <div class="value">{{ item.name }}</div>
          </template>
        </el-autocomplete>
      </div>
      <transition>
        <el-collapse class="document-catalogue-wrap" v-model="activeNames">
          <el-collapse-item
              :class="item.children.length ? '' : 'no-child'"
              :name="item.name"
              v-for="item in catalogueList"
              :key="item.id"
          >
            <template #title>
              <FileOrDirCatalogue
                  :cType="item.cType" :fileName="item.name" :date="item.createTime"
              />
            </template>
            <div v-for="child in item.children" :key="child.id">
              <template v-if="child.documentId">
                <div :class="Number(previewId)===child.documentId?'file file-hover':'file'">
                  <FileOrDirCatalogue :style="Number(previewId)===child.documentId?'color:#00A298':'color: inherit'"
                                      :cType="child.cType" :fileName="child.name" @click="showFile(child.documentId)"
                                      :documentId="child.documentId"
                                      :date="child.createTime"/>
                </div>
              </template>
              <template v-else>
                <el-collapse-item
                    :class="child.children.length ? '' : 'no-child'"
                    :name="child.name" :key="child.id"
                >
                  <template #title>
                    <FileOrDirCatalogue :cType="child.cType" :fileName="child.name"
                                        :date="child.createTime"/>
                  </template>
                  <div :class="Number(previewId)===childChild.documentId?'file file-hover':'file'"
                       v-for="childChild in child.children" :key="childChild.id">
                    <FileOrDirCatalogue
                        :style="Number(previewId)===childChild.documentId?'color:#00A298':'color: inherit'"
                        :cType="childChild.cType"
                        :fileName="childChild.name"
                        @click="showFile(childChild.documentId)"
                        :documentId="childChild.documentId"
                        :date="childChild.createTime"
                    />
                  </div>
                </el-collapse-item>
              </template>
            </div>
          </el-collapse-item>
        </el-collapse>
      </transition>
    </div>
    <div class="file-wrap">
      <FileContent :url="url" @prevPhoto="prevPhoto" :docId="previewId"/>
    </div>
  </div>
</template>

<script>
import FileContent from '@/components/homeShareSpace/SpaceFileContent'
import FileOrDirCatalogue from '@/components/homeShareSpace/FileOrDirCatalogue.vue'
import {reactive, ref, toRefs, onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import {computed} from '@vue/reactivity'
import FrontApi from "@/api/front";
import router from '@/router/index'
import useDocumentStore from "@/store/modules/document";

export default {
  components: {FileContent, FileOrDirCatalogue},
  props: {
    docId: String,
    type: Number,
  },
  setup(props) {
    const store = useDocumentStore();
    const isCollapse = ref(true)
    const searchItem = ref('')
    const links = ref([])
    const previewId = ref('')


    let data = reactive({
      activeIndex: '',
      catalogueList: [],
      activeNames: [],
      url: '',
    })

    const returnToSpace = () => {
      router.push({name: "shareSpace"})
    }

    useDocumentStore().getSpaceFileUrl(props.docId).then(res => {
      data.activeIndex = props.docId + ''
      data.url = res
      previewId.value = props.docId
    }).catch(err => {
      ElMessage(err)
    })

    const getParentNode = (docId, directoryId) => {
      FrontApi.getParentNode(docId, directoryId).then(res => {
        res.data.forEach(e => {
          data.activeNames.push(e.name)
        })
      })
    }

    const getCatalogue = (type) => {
      FrontApi.getCatalogue(type).then(res => {
        getParentNode(props.docId, null)
        data.catalogueList = res.data;
      });
    }

    const prevPhoto = (docId) => {
      console.log(docId)
      showFile(docId)
    }

    const showFile = (id) => {
      id && useDocumentStore().getSpaceFileUrl(id).then(res => {
        data.url = res
        previewId.value = id
      }).catch(err => {
        ElMessage(err)
      })
    }

    const previewQuerySearch = (searchItem, cb) => {
      if (searchItem !== null && searchItem !== '') {
        FrontApi.spaceSearch(searchItem, Number(props.type)).then(res => {
          links.value = res.data
          cb(links.value)
        })
      } else {
        cb([])
      }
    }

    const handleSearch1 = (item) => {
      if (item.documentId !== null && item.documentId !== undefined) {
        showFile(item.documentId)
        data.activeNames = []
        getParentNode(item.documentId, null)
      } else {
        FrontApi.getDirectoryFirstDoc(item.id).then(res => {
          store.spaceDocId = res.data
          if (res.data !== undefined) {
            showFile(res.data)
            data.activeNames = []
            getParentNode(res.data, null)
          } else {
            getParentNode(null, item.id)
          }
        })

      }
    }


    const typeData = computed(() => {
      return (type) => {
        const typeMap = {
          'doc': 'WordIcon',
          'docx': 'WordIcon',
          'pdf': 'PptIcon',
          'xls': 'ExcelIcon',
          'xlsx': 'ExcelIcon',
        }
        return typeMap[type.toLowerCase()] || 'UnknownIcon'
      }
    })

    const directoryType =computed(()=>{
      return (type) => {
        const typeMap = {
          '1': '专业知识',
          '2': '问题案例',
          '3': '其他分享',
          '4': '市场售后',
        }
        return typeMap[type] || '未知目录'
      }
    })

    onMounted(() => {
      getCatalogue(props.type)
    })

    return {
      isCollapse,
      isShow: store.isShow,
      ...toRefs(data),
      typeData,
      previewQuerySearch,
      searchItem,
      handleSearch1,
      directoryType,
      returnToSpace,
      showFile,
      prevPhoto,
      previewId
    }
  }
}


</script>
<style scoped lang="scss">
.document-wrap {
  display: flex;
  height: calc(99.5vh);
  border-top: 1px solid rgb(228, 231, 237);

}

.menu-wrap {

  border-right: 1px solid rgb(228, 231, 237);
  height: 100%;
  min-width: 18%;
  overflow-y: auto;
  overflow-x: hidden;
}

.menu-wrap.expand {
  flex-basis: 26rem;
}

.el-menu {
  border-right: none;
}

.return-button {
  background-color: #1A9B92;
  color: white;
  border-color: #1A9B92;
  font-size: 12px;
}


.return-button:hover {
  background-color: #bdece9;
}

.file-wrap {
  flex: 1;
  position: relative;
}

.el-collapse {
  border-bottom: none;
}

:deep(.el-collapse-item__header) {
  position: relative;
  padding-left: 3rem;
  border-bottom: none;
  height: 4.8rem;
}

:deep(.el-collapse-item__header:hover) {
  background: #F3F6FC;
  border-radius: 8px;
}


:deep(.el-collapse-item__header:hover .one-file-or-dir-hover) {
  display: flex;
}

.file:hover {
  background: #F3F6FC;
  cursor: pointer;
}


:deep(.file:hover .one-file-or-dir-hover) {
  display: flex;
}

:deep(.el-collapse-item__arrow) {
  position: absolute;
  left: 0;
}

.document-catalogue-wrap {
  margin: 0 2.4rem auto 2.4rem;
}

.document-catalogue-wrap :deep(.el-collapse-item__wrap) {
  border: none;
  margin-left: 3rem;
}


:deep(.el-collapse-item__content) {
  padding-bottom: 0;
}

.file-hover {
  background-color: #eaeef6;
  border-radius: 8px;
}

.file:hover {
  background-color: #eaeef6;
  border-radius: 8px;
}

.file {
  display: flex;
  align-items: center;
  height: 4.8rem;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.space-font {
  margin-top: 18px;
  font-size: 20px;
  line-height: 30px;
  margin-left: 22px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.preview-complete {
  width: 100%;
  margin-left: 2.5rem;
  margin-bottom: 1rem;
}

.preview-complete >>> .el-autocomplete {
  width: 85% !important;
}

.el-link.el-link--primary:hover {
  --el-link-text-color: #1A9B92 !important;
}
.first-title{
  font-size: 24px;
  font-weight: bold;
  color: var(--el-text-color-regular);
}
</style>
